<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度注册</title>
    <link href="css/baidu_reg.css" type="text/css" rel="stylesheet">
    <!--css外链接-->
    <!--<style></style>-->
    <!--js/jquery的外链接-->
    <!--<script></script>-->
    <script language="JavaScript" src="javascripts/jquery-3.3.1.min.js"></script>
</head>
<body>


<div id="reg">
    <form name="Myform">
        <p><div id="reg_head"><img src="css/image1/logo.png" id="hinfo"></div></p>
    <div id="reg_body">
        <p class="bdiv1"><label class="blab1">用户名:</label><input id="usr" class="binput1" type="text" placeholder="请设置用户名"><span id="info"></span></p>
        <p class="bdiv2"><label class="blab2">手机号:</label><input  id="tel" class="binput2" type="text" placeholder="请填写手机号码"></p>
        <p class="bdiv3"><label class="blab3">密码:</label><input  id="pwd" class="binput3" type="text" placeholder="请设置用户密码"></p>
        <p class="bdiv4"><label class="blab4">验证码:</label><input id="yzm" class="abinput" required="required" type="text" placeholder="验证码">
        <button  class="abcinput"  >获取验证码</button></p>
    </div>
    <div style="clear:both"></div>
    <div id="reg_footer">
        <p><input type="checkbox"><span>阅读并接受<a href="#">百度用户协议</a>及<a href="#">百度隐私权保护声明</a></span></p>
        <input type="submit"  value="提交" style="height:25px;width:60px;margin-left:100px">
    </div>
    </form>
</div>
<script language="JavaScript">
    $("usr").onfocus = function(){
      document.getElementById("info").innerHTML="请输入6-16的字符串";
      //js语法；
       $("info").style.color="blue";
       //jquery语法
    };
    document.getElementById("usr").onblur =function(){

        $(document).ready( function() {

            $.ajax({
                url: "namelist.txt",
                type: 'GET',
                async: true,
                data: {
                    username: 'yang'
                },
                dataType: 'text',
                beforeSend: function (xhr) {
                    console.log(xhr);
                    console.log('发送前')
                },
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    var flag=false;
                    var obj=JSON.parse(data);
                    for (var i=0,len=data.length;i<len;i++){
                        console.log(obj.name[i]);
                        if ( $("#usr").val() == obj.name[i] ){
                            console.log($("#usr").val());
                            console.log(obj.name[i]);
                            $("#info").html("您的名字太受欢迎！");
                            flag = true;
                            break;
                        }
                    }
                    if (flag == false)
                    {
                        if ( $('#usr').val().length >=6 && $('#usr').val().length <= 16 ){
                            document.getElementById("info").innerHTML="<img src='css/image1/ok_small.png'>";
                        }
                        else{
                            document.getElementById("info").innerHTML="<img src='css/image1/err_small.png'><span>长度不符合要求！</span>";
                            document.getElementById("info").style.color="red";
                        }
                    }
                },
                error: function (xhr, textStatus) {
                    console.log('错误');
                    console.log(xhr);
                    console.log(textStatus);
                },
                complete: function () {
                    console.log('结束')
                }
            })
        })
    }


</script>

</body>
</html>